import $ from 'jQuery';
(function () {
    let $vue = new Vue({
        el: '.homepage-hook',
        data: {
            boxs: {
                box1: {show: true, hook: '.box1-hook', lock: true, url: '', params: {}},
                box2: {show: false, hook: '.box2-hook', url: '', params: {}},
                box3: {show: false, hook: '.box3-hook', url: '', params: {}},
                box4: {show: false, hook: '.box4-hook', url: '', params: {}}
            },
            statistics: {
                palletTotal: 0,
                storageTotal: 0,
                transportTotal: 0
            },
            account:{
            },
        },
        created: function () {
            IOT.getServerData(URI.HOMEPAGE.STATUS_DATA, {}, (ret) => {
                if (ret && ret.code === 200) {
                    let data = ret.data;
                    this.statistics = $.extend({}, this.statistics, data);
                    this.drawLine();
                    this.drawLine2();
                    this.drawLine3();
                } else {
                    IOT.tips('数据加载失败！请稍后重试', 'error');
                }
            })
        },
        methods: {
            Backlog:function () {
                M.Page.emit(URI.WORKORDER.BACKLOG.PAGE);
            },
            Alarm:function () {
                M.Page.emit(URI.ALARM.PAGE);
            },
            SelectMonth:function (value,e) {
                $("#BtnClass button").removeClass("activing");
                $("#BtnClass button").addClass("btn-gray");
                $(e.currentTarget).removeClass("btn-gray");
                $(e.currentTarget).attr("class","btn chartBtn activing");
                /*IOT.getServerData(URI.HOMEPAGE.SELECT_MONTH,value,(ret) => {
                    if (ret.code === 200) {
                        this.account = $.extend({}, this.account, ret.data);
                        this.drawLine3();
                    } else {
                        IOT.tips(ret.message || '服务器请求失败，稍后再试！', 'error');
                    }
                });*/
            },
            emitPage: function () {
                M.Page.load(this.boxs);
            },
            // 上一页
            prePage: function () {
                M.Page.prePage(this.boxs);
            },
            // 触发刷新页(当前显示的页面)
            refreshPage: function () {
                M.Page.refreshPage(this.boxs);
            },
            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('myChart1'));
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: '路灯状态统计',
                        x:'24',
                        textStyle: {
                            fontFamily:'Microsoft YaHei',
                            fontSize: '18',
                            color:'#515872',
                            fontWeight : 'normal'
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: '28',
                        y:'60',
                        itemWidth:27,
                        itemHeight:10,
                        itemGap:24,
                        data:['开灯数量','关灯数量','故障数量'],
                        textStyle: {
                            fontFamily:'Microsoft YaHei',
                            fontSize: '14',
                            color:'#515872',
                            fontWeight : 'normal'
                        }
                    },
                    color:['#22AFCF','#D33525','#FFAF30'],
                    series: [
                        {
                            name:'数量',
                            type:'pie',
                            radius: ['45%', '70%'],
                            center: ['60%', '50%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center',
                                    textStyle: {
                                        fontSize: '16',
                                        color:'#CFCFCF'
                                    }
                                },
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:[
                                {value:335, name:'开灯数量'},
                                {value:310, name:'关灯数量'},
                                {value:234, name:'故障数量'},
                            ]
                        }
                    ]
                },true);
                window.onresize = myChart.resize;
            },
            drawLine2() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('myChart2'));
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: '未完成工单类型统计',
                        x:'24',
                        textStyle: {
                            fontFamily:'Microsoft YaHei',
                            fontSize: '18',
                            color:'#515872',
                            fontWeight : 'normal'
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: '28',
                        y:'60',
                        itemWidth:27,
                        itemHeight:10,
                        itemGap:24,
                        data:['待签收','待处理','待审核','待派件'],
                        textStyle: {
                            fontFamily:'Microsoft YaHei',
                            fontSize: '14',
                            color:'#515872',
                            fontWeight : 'normal'
                        }

                    },
                    color:['#5DACE5','#4BBA83','#E3C74A','#E57944'],
                    series: [
                        {
                            name:'数量',
                            type:'pie',
                            radius: ['25%', '70%'],
                            center: ['65%', '50%'],
                            avoidLabelOverlap: false,
                            itemStyle : {
                                normal : {
                                    label : {
                                        show : false
                                    },
                                    labelLine : {
                                        show : false
                                    }
                                },
                                emphasis : {
                                    label : {
                                        show : true,
                                        formatter: "{b}",
                                        position : 'center',
                                        textStyle : {
                                            fontWeight : 'bold'
                                        }
                                    }
                                }
                            },
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '14',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:[
                                {value:335, name:'待签收'},
                                {value:310, name:'待处理'},
                                {value:234, name:'待审核'},
                                {value:335, name:'待派件'}
                            ]
                        }
                    ]
                },true);
                window.onresize = myChart.resize;
            },
            drawLine3() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('myChart3'));
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: '故障类型统计',
                        x:'28',
                        textStyle: {
                            fontFamily:'Microsoft YaHei',
                            fontSize: '18',
                            color:'#515872',
                            fontWeight : 'normal'
                        }
                    },
                    tooltip : {
                        trigger: 'item',
                        position:'top',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        },
                        backgroundColor:'#515872'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true,
                    },
                    xAxis : [
                        {
                            type : 'category',
                            axisLabel:{interval:0},
                            data : ['电容故障','光源故障','继电器故障','保险丝故障','存储芯片故障','时钟芯片故障','读卡模块故障',
                                '内部参数配置故障','漏电报警','防盗报警','水浸报警','电流过大报警','功率过大报警','功率过小报警','其他']
                        },
                    ],
                    yAxis : [{
                        type : 'value'
                    }],
                    series : [
                        {
                            name:'故障类型统计',
                            type:'bar',
                            data:[120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210,134],
                           /* barWidth : 50,//柱图宽度*/
                            barMaxWidth:50,//最大宽度
                            itemStyle:{
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#A4D6FB'}, {offset: 1, color: '#1a83d5'}]
                                    )
                                },
                            },
                        },
                    ]
                },true);
                window.onresize = myChart.resize;
            }
        },
        mounted: function () {
            this.drawLine();
            this.drawLine2();
            this.drawLine3();
            this.$nextTick(() => {

            });
        }
    });
})();
